<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) {return;}
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<!-- body  -->
    <div id="body-display">
        
        
        <!-- menu-left  -->
        <div id="menu-left">        
           <?php include_component('componentes','categoria') ?>
            
        </div>
        <!-- end menu-left  -->


        <!-- content-center  -->
         <div id="content-centerP">
             
<div class="menu-int">

    <li class="menu-int-li borderCornersTop backgroundWhite"><?php
    
    $mostrar2 = "";
   
    if(isset ($mostrar)){
        echo $mostrar." / ";
    }if(!isset ($mostrar)){
        $mostrar2;
    }
     ?> <?php echo $producto->getNombre() ?></li>

    <div class="menu-int-content borderCornersBottom">
    
    <div id="jwj_productoShowImagen">

        <!-- Start Advanced Gallery Html Containers -->
	<div id="gallery" class="content-gallery">
                    <div class="slideshow-container">
                        <div id="loading" class="loader"></div>
			<div id="slideshow" class="slideshow"></div>
                    </div>
		<div id="caption" class="caption-container"></div>
        </div>

        <div id="thumbs" class="navigation">
                <ul class="thumbs noscript">
                    <?php
                    $i=0;
                    foreach ($producto->getArchivo() as $imagen): ?>
                        <li>
                            <a class="thumb" name="imagen_<?php echo $i; ?>" href="<?php echo ('http://call.sisapp.us/uploads/productos/g_'.$imagen->getNombre()); ?>" title="imagen_<?php echo $i; ?>">
                            <img width="100px" src="<?php echo ('http://call.sisapp.us/uploads/productos/s_'.$imagen->getNombre()); ?>" alt="imagen_<?php echo $i; ?>" />
                            </a>
			</li>
                    <?php
                    $i++;
                    
                    endforeach; ?>
                    <?php if($i==0) { ?>
                        <li>
                         <a class="thumb" name="imagen_<?php echo $i; ?>" href="<?php echo ('/images/img_no_disp_es.jpg'); ?>" title="imagen_<?php echo $i; ?>">   
                        <img alt="<?php echo $producto->getNombre() ?>" width="100px"  src="<?php  echo ('/images/img_no_disp_es.jpg'); ?>" />
                        </a>
                         </li>
                    <?php } ?>    
                </ul>
        </div>
	



    </div>
      <?php if(!$precios) {
            $precios = 0;

        } ?>
    <div id="jwj_productoShowDetalle">
        
        <h1><?php echo $producto->getNombre() ?></h1>
              
        <p class="jwj_producto_Linkverde"><a href="<?php echo url_for('referir/new?producto_id='.$producto->getId()) ?>">Email a un amigo</a></p>
        <p class="jwj_producto_Linkverde">Visitas: <?php echo $producto->getVisita() ?></p>
        <p class="jwj_producto_Linkverde">Disponibilidad: En Stock</p>
        
        <p class="jwj_producto_Precio"><?php if($precios) { echo $precios->getPrecio(); } ?>
                
        </p>

    <div id="jwj_producto_choice">
    
    </div>

        
        <li class="jwj_producto_Linkblanco">
            <button type="button" id="AddCompare" title="Comparar Producto">Comparar Producto</button>
            <button type="button" id="AddWish" title="Lista de Deseos">Lista de Deseos</button>
        </li>
        
        <div class="clear"></div>
        <h5> BREVE DESCRIPCION</h5>
        <p class="jwj_producto_Mancheta"><?php echo $producto->getMancheta() ?></p>
        <div class="clear" style="margin-bottom: 20px;"></div>
        
        
        
        <div class="clear"></div>
    </div>
    <div class="clear"></div>

    <div id="tabs">
	<ul>
		<li><a href="#tabs-1">Producto Descripción</a></li>
		<li><a href="#tabs-2">Información Adicional</a></li>
                <li><a href="#tabs-3">Relacionados</a></li>
	</ul>
	<div id="tabs-1">
            <p><?php echo htmlspecialchars_decode($producto->getContenido());
                    ?></p>
	</div>
	<div id="tabs-2">
            <p><?php foreach ($detalles as $detalle): ?>
               <?php echo $detalle->getProductoEtiqueta()->getNombre(); ?>: <?php echo $detalle->getNombre(); ?>
               <?php endforeach; ?></p>
	</div>
	<div id="tabs-3">
                       
                

                <div class="clear"></div>
            
            
	</div>
        
     </div>

    






</div>

    <div class="clear"></div>
                </div>
         
       
        </div>
        <!-- end content-center  -->
             
            </div>



       <script type="text/javascript">

        $( "#tabs" ).tabs();



        jQuery(document).ready(function($) {
				// We only want these styles applied when javascript is enabled
				$('div.navigation').css({'width' : '400px', 'float' : 'botton'});
				$('.content-gallery').css('display', 'block');

				// Initially set opacity on thumbs and add
				// additional styling for hover effect on thumbs
				var onMouseOutOpacity = 0.67;
				$('#thumbs ul.thumbs li').opacityrollover({
					mouseOutOpacity:   onMouseOutOpacity,
					mouseOverOpacity:  1.0,
					fadeSpeed:         'fast',
					exemptionSelector: '.selected'
				});

				// Initialize Advanced Galleriffic Gallery
				var gallery = $('#thumbs').galleriffic({
					delay:                     2500,
					numThumbs:                 3,
					preloadAhead:              10,
					enableTopPager:            false,
					enableBottomPager:         true,
					maxPagesToShow:            7,
					imageContainerSel:         '#slideshow',
					controlsContainerSel:      '#controls',
					captionContainerSel:       false,
					loadingContainerSel:       '#loading',
					renderSSControls:          false,
					renderNavControls:         false,
					playLinkText:              'Play Slideshow',
					pauseLinkText:             'Pause Slideshow',
					prevLinkText:              '&lsaquo; Previous Photo',
					nextLinkText:              'Siguiente Photo &rsaquo;',
					nextPageLinkText:          '- &rsaquo;',
					prevPageLinkText:          '&lsaquo; -',
					enableHistory:             false,
					autoStart:                 false,
					syncTransitions:           true,
					defaultTransitionDuration: 1500,
					onSlideChange:             function(prevIndex, nextIndex) {
						// 'this' refers to the gallery, which is an extension of $('#thumbs')
						this.find('ul.thumbs').children()
							.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
							.eq(nextIndex).fadeTo('fast', 1.0);
					},
					onPageTransitionOut:       function(callback) {
						this.fadeTo('fast', 0.0, callback);
					},
					onPageTransitionIn:        function() {
						this.fadeTo('fast', 1.0);
					}
				});
			});

</script>